{include file="my/header"}
<script src="{$Think.const.JS_URL}charts.js"></script>
<div class="layui-container-fluid index-block">
    {if session('userclass') == '10' || session('userclass') == '2' || session('userclass') == '1'}
    <div class="container-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="from-item margin-top20">
                    <!-- 课程录入情况环图 -->
                    <div id="pie" style="width: 100%; height: 350px"></div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="from-item margin-top20">
                    <!-- 班级录入情况环图 -->
                    <div id="pie2" style="width: 100%; height: 350px"></div>
                </div>
            </div>
        </div>
    </div>
    {/if}

    <script>
        var inputStateData;
        $(function () {
            ajaxRequest("get", "{:url('score/getRecordEntrySituation')}", null, function (res) {
                console.log(res);
                inputStateData = res
                initCharts();
            });
        })
        function initCharts() {
            var myChart1 = echarts.init(document.getElementById('pie'));
            option1 = {
                title: {
                    text: '课程成绩录入情况',
                    left: 'center',
                }, //标题
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c}门 ({d}%)',
                }, //提示框，鼠标悬浮交互时的信息提示
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    formatter: function (name) {
                        return name;
                    },
                },
                graphic: {
                    type: 'text',
                    left: 'center',
                    top: 'center',
                    style: {
                        text: '本学期总课程\n' + inputStateData.allCourse, //使用“+”可以使每行文字居中
                        textAlign: 'center',
                        font: ' bolder 16px cursive',
                        fill: '#000',
                        width: 30,
                        height: 30,
                    },
                }, //图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配
                //此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
                series: [
                    {
                        name: '本学院课程录入情况', //tooltip提示框中显示内容
                        type: 'pie', //图形类型，如饼状图，柱状图等
                        radius: ['35%', '60%'],
                        selectedMode: 'single',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    textStyle: { color: '#3c4858', fontSize: '16' },
                                    formatter: function (data) {
                                        //让series 中的文字进行换行
                                        return data.value;
                                    },
                                },
                            }, //基本样式
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                        data: [
                            { value: inputStateData.courseInputNum, name: '已录课程数' },
                            { value: (inputStateData.allCourse - inputStateData.courseInputNum), name: '未录课程数' },
                        ], //数据，数据中其他属性，查阅文档
                        color: ['#91cc75', '#ff7070'], //各个区域颜色
                    }, //数组中一个{}元素，一个图，以此可以做出环形图
                ], //系列列表
            };
            myChart1.setOption(option1);

            var myChart1 = echarts.init(document.getElementById('pie2'));
            option2 = {
                //标题
                title: {
                    text: '班级成绩录入情况',
                    left: 'center',
                },
                //提示框，鼠标悬浮交互时的信息提示
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c}个 ({d}%)',
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    formatter: function (name) {
                        return name;
                    },
                },
                // 中间文字
                // graphic: {
                //     type: 'text',
                //     left: 'center',
                //     top: 'center',
                //     style: {
                //         text: '总班级数\n' + 32, //使用“+”可以使每行文字居中
                //         textAlign: 'center',
                //         font: ' bolder 16px cursive',
                //         fill: '#000',
                //         width: 30,
                //         height: 30,
                //     },
                // },
                series: [
                    {
                        name: '本学院课程录入情况', //tooltip提示框中显示内容
                        type: 'pie', //图形类型，如饼状图，柱状图等
                        radius: ['0%', '60%'],
                        selectedMode: 'single',  //点击饼块,脱离圆点一部分,'single'|'multiple',单选和多选
                        selectedOffset: 8, //设置选中偏移量
                        itemStyle: {
                            borderRadius: 8,
                            normal: {
                                label: {
                                    show: true,
                                    textStyle: { color: '#3c4858', fontSize: '16' },
                                    formatter: function (data) {
                                        //让series 中的文字进行换行
                                        return data.value;
                                    },
                                },
                            }, //基本样式
                        },
                        clockwise: true,
                        label: {
                            fontSize: 18,
                            color: '#235894'
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                        labelLine: {
                            lineStyle: {
                                color: '#235894'
                            }
                        },
                        data: [
                            { value: inputStateData.classInputNum, name: '已录班级数' },
                            { value: inputStateData.allClass - inputStateData.classInputNum, name: '未录班级数' },
                        ], //数据，数据中其他属性，查阅文档
                        color: ['#5470c6', '#fac858'], //各个区域颜色
                    }, //数组中一个{}元素，一个图，以此可以做出环形图
                ], //系列列表
            };
            myChart1.setOption(option2);
        }
    </script>


    {include file="my/footer"}